<template>
  <div>
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="姓名" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.department" placeholder="部门" clearable style="width: 90px" class="filter-item">
        <el-option v-for="item in department" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="findList">
        查找
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>



    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="合同id" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.contractId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="员工id" min-width="100px">
        <template slot-scope="{row}">
          <span class="link-type" >{{ row.personnelId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.position }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同开始时间" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同截止时间" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="续签次数" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.renewTimes }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工资" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.salary }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进入公司时间" width="100px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.dateIntoCompany }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同" width="100px" align="center">
        <template slot-scope="{row}">
          <span><el-link type="primary" :href="row.content">主要链接</el-link></span>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)" >
            Edit
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row.contractId)">
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[20, 30, 50,500]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
  </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm"  :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="ID" prop="id">
          <el-input :placeholder='temp.personnelId' v-module.number='temp.personnelId' :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="personnelName">
          <el-input v-model="temp.personnelName" />
        </el-form-item>

        <el-form-item  v-permission="['admin']" label="部门" prop="department">
          <el-select v-model="temp.department" class="filter-item" placeholder="请选择部门">
            <el-option v-for="item in department" :key="item.key" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="temp.startTime" type="datetime" placeholder="请选择合同开始时间" />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="temp.endTime" type="datetime" placeholder="请选择合同结束时间" />
        </el-form-item>
        <el-form-item label="续签次数" prop="renewTimes">
          <el-input v-model="temp.renewTimes" />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="temp.position" />
        </el-form-item>
        <el-form-item label="试用期工资" prop="probationarySalary">
          <el-input v-model.number="temp.probationarySalary" />
        </el-form-item>
        <el-form-item label="薪水" prop="salary">
          <el-input v-model.number="temp.salary" />
        </el-form-item>
        <el-form-item label="入司时间" prop="dateIntoCompany">
          <el-date-picker v-model="temp.dateIntoCompany" type="datetime" placeholder="请选择进入公司时间" />
        </el-form-item>
        合同文件
        <el-input v-model="temp.content" v-if="true"></el-input>
        <el-upload class="upload-demo" ref="upload" drag action="http://43.138.43.239:8090/imgUpload" multiple
                   :on-success="handleAvatarSuccess">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>


      </el-form>
      注：id自动生成
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
  import {getList,addData,deleteData} from '@/api/contract'
  export default{
    data(){
      return{
        list:null,
        listLoading:true,
        total: 0,
        dialogFormVisible:false,
        listQuery: {
          page: 1,
          limit: 20,
          department:null,
          sex:null,
          name:null
        },
        department:['产品','管理','运营','市场','技术','行政'],
        sex:['男','女'],
        dialogStatus: '',
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        dialogPvVisible: false,
        temp:{

        }
      }
    },
    created(){
      this.listQuery.department=this.$store.state.department
      this.findList()
    },
    methods:{
      findList(){
        this.listLoading = true,
        getList(this.listQuery).then(response=>{
          this.list=response.data.content;
          this.total = response.data.total;
          this.listLoading = false
        })
      },
      handleAvatarSuccess(res, file){
        console.log(res);
        this.temp.content = res;
      },
      resetTemp() {
        this.temp = {
          personnelId: 0,
          dateCome:'',
          personnelName: '',
          salary:undefined,
          position:'',
          department:'',
          sex:''
        }
      },
      handleCreate(){
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        // this.$refs['dataForm'].clearValidate()
      },
      createData(){
        this.listLoading = true,
        this.temp.startTime=this.dateFormat(this.temp.startTime)
        this.temp.endTime=this.dateFormat(this.temp.endTime)
        this.temp.dateIntoCompany=this.dateFormat(this.temp.dateIntoCompany)
        addData(this.temp).then(response=>{
          this.listLoading = false
          this.$message({
            message:response.message,
            type:'success'
          })
          this.findList()
          this.dialogFormVisible=false
        })
      },
      dateFormat(time) {
                      var date=new Date(time);
                      var year=date.getFullYear();
                      /* 在日期格式中，月份是从0开始的，因此要加0
                       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                       * */
                      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                      // 拼接
                      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
                  },
      handleUpdate(row) {
        this.temp = Object.assign({}, row) // copy obj
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      },
      updateData(){
        addData(this.temp).then(response=>{
          this.dialogFormVisible=false
          this.$message({
            message:response.message,
            type:'success'
          })
          this.findList()
        })
      },
      handleDelete(id){
        this.$confirm('此操作将永久删除该项, 是否继续?', 'id:'+id, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteData(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.list=this.list.filter((o)=>{
            return o.contractId!=id
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      handleSizeChange(val){
        this.listQuery.limit=val
        this.findList()
      },
      handleCurrentChange(val){
        this.listQuery.page=val
        this.findList()
      }
    }

  }
</script>

<style>
</style>
